import React, { useState } from 'react';
import { Tabs } from 'antd-mobile';
import { useNavigate ,Outlet } from 'react-router-dom';

// 计算rem值的工具函数
const rem = (px) => `${px / 16}rem`;

const tabs = [
  { id: "1", name: "全部", path: "/ding/qding" },
  { id: "2", name: "待收货", path: "/ding/dais" },
  { id: "3", name: "已完成", path: "/ding/wan" },
  { id: "4", name: "待发货", path: "/ding/df" },
  { id: "5", name: "退款", path: "/ding/tui" },
];

export default function Ding() {
  const [activeKey, setActiveKey] = useState('1');
  const navigate = useNavigate();

  const handleTabChange = (key) => {
    setActiveKey(key);
    // 根据key找到对应的路径并跳转
    const tab = tabs.find(tab => tab.id === key);
    if (tab) {
      navigate(tab.path);
    }
  };

  return (
    <div style={{
      backgroundColor: '#f5f5f5',
      minHeight: '100vh',
      fontFamily: 'Arial, sans-serif'
    }}>
      {/* 顶部导航栏 */}
      <div style={{
        backgroundColor: '#e52222',
        height: "20rem",
        display: 'flex',
        alignItems: 'center',
        padding: `0 ${rem(15)}`,
        color: '#fff'
      }}>
        <div style={{ fontSize: "8rem", cursor: 'pointer' ,marginRight:"40rem"}} onClick={() => navigate("/person")}>
          &lt;
        </div>
        <div style={{ fontSize: "5rem", fontWeight: 'bold' }}>商城订单</div>
      </div>

      {/* 订单状态标签栏 */}
      <Tabs activeKey={activeKey} onChange={handleTabChange}>
        {tabs.map(tab => (
          <Tabs.Tab title={tab.name} key={tab.id} ><Outlet /></Tabs.Tab>
        ))}
      </Tabs>
    </div>
  );
}